<template>
    <div style="background-color: #5C77F6;">
        <div>
            <div id="canvas"></div>
            <img id="asheng-canvas-image" src="" style="width: 276px;height:276px;margin-top: 15px;border-radius: 15px;" />
        </div>

        <div class="asheng-shop-info">
            <div class="asheng-shop-info-name"></div>
            <div class="asheng-shop-info-bottom">
                <div class="asheng-shop-info-bottom-goodname">{{ good.goodName }}</div>
                <div class="asheng-shop-info-bottom-line"></div>

                <table class="share-qrcode-dlglog-table" style="margin-top: 0px;">
                    <tr>
                        <td class="asheng-qrcode-left">
                            <div class="asheng-qrcode-left-scan-tips">扫码免费领取>>></div>
                            <div class="asheng-qrcode-left-adv-text" style="margin-top: 10px;">
                                <span>正规号卡</span><span>官方售后</span>
                            </div>
                            <div class="asheng-qrcode-left-adv-text"><span>极速发货</span><span>包邮到家</span></div>
                        </td>
                        <td class="asheng-dlglog-qrcode">
                            <div id="asheng-dlglog-qrcode-div"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="width: 100%;height: 20px;"></div>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2-fix';
export default {
    name: "template1ShareImage",
    props: {
        url: {
            type: String
        },
        good: {
            type: Object,
            defult: {
                goodName: "无"
            }
        }
    },
    created() {

    },
    mounted() {
        let url = this.url;
        let dom = document.getElementById("asheng-dlglog-qrcode-div")
        dom.innerHTML = ""
        new QRCode(dom, {
            text: url,
            height: 100,
            width: 100
        });

        const img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');
        img.src = this.good.logoImg
        console.info("图片", this.good.logoImg)
        img.onload = () => {
            let imgUrl = this.image2Base64(img)
            let imageElement = document.getElementById("asheng-canvas-image");
            imageElement.setAttribute("src", imgUrl)
        }
    },
    methods: {
        // 图片转为base64编码
        image2Base64(img) {
            // eslint-disable-next-line prefer-const, no-var
            let canvas = document.createElement('canvas'); // 一定要设置为let，不然图片不显示
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            const dataURL = canvas.toDataURL('image/png');
            return dataURL;
        }
    }
}

</script>
<style scoped>
/** 分享 */


.share-qrcode-dlglog-table {
    width: 96%;
    margin-left: 2%;
    margin-top: 10px;
    margin-bottom: 10px;
}

#asheng-dlglog-qrcode-div {
    width: 100px;
    height: 100px;
    padding-left: 15px;
    padding-bottom: 5px;
    overflow: hidden;
}

.asheng-shop-info {
    width: 274px;
    margin-left: 18px;
    background: linear-gradient(to bottom, #BFEEFF, #F0ECFB, white);
    border-radius: 0px 0px 15px 15px;
    overflow: hidden;
    margin-top: -40px;
}

.asheng-shop-info-headimg {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 6px solid #BFEEFF;
    overflow: hidden;
    text-align: center;
    position: absolute;
    margin-top: -25px;
    margin-left: 25px;
}

.asheng-shop-info-name {
    height: 48px;
    line-height: 40px;
    font-size: 15px;
    font-weight: bold;
}

.asheng-shop-info-name span {
    float: left;
    margin-left: 93px;
}

.asheng-shop-info-bottom {
    background-color: white;
    width: 266px;
    margin-left: 5px;
    border-radius: 15px;
}

.asheng-shop-info-bottom-goodname {
    width: 246px;
    margin-left: 10px;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
}

.asheng-shop-info-bottom-line {
    width: 246px;
    height: 15px;
    margin-left: 10px;
    border-top: 2px dotted #EDECFC;
}

.asheng-qrcode-left {
    width: 126px;
    text-align: left;
}

.asheng-qrcode-left-scan-tips {
    background-color: #5C77F6;
    color: white;
    width: 126px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

.asheng-qrcode-left-adv-text span {
    font-size: 12px;
    color: #666666;
    line-height: 18px;
    margin-right: 8px;
}
</style>